.clock {
    position: relative;
    top: 20px;
    left: 20px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    box-shadow: 0 0 0 10px #666;
  }
  
  .clock .background > div {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 95%;
    background: #ccc;
  }
  
  .clock .background > div:nth-child(1) {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  
  .clock .background > div:nth-child(2) {
    transform: translate(-50%, -50%) rotate(30deg);
  }
  
  .clock .background > div:nth-child(3) {
    transform: translate(-50%, -50%) rotate(60deg);
  }
  
  .clock .background > div:nth-child(4) {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  
  .clock .background > div:nth-child(5) {
    transform: translate(-50%, -50%) rotate(120deg);
  }
  
  .clock .background > div:nth-child(6) {
    transform: translate(-50%, -50%) rotate(150deg);
  }
  
  .clock .background::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background: #fff;
    border-radius: 50%;
    transform: scale(0.8);
  }
  
  .clock > .point {
    width: 20px;
    height: 20px;
    background: #666;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  
  .clock .hour,
  .clock .minute,
  .clock .second {
    /* transition: all 1s linear; */
  }
  
  .clock .hour {
    width: 9px;
    position: absolute;
    height: 25%;
    background: #666;
    left: 50%;
    bottom: 50%;
    transform-origin: 50% bottom;
    transform: translate(-50%, 0) rotate(0);
    border-radius: 10px;
  }
  
  .clock .minute {
    width: 6px;
    position: absolute;
    height: 35%;
    background: #666;
    left: 50%;
    bottom: 50%;
    transform-origin: 50% bottom;
    transform: translate(-50%, 0) rotate(0);
    border-radius: 10px;
  }
  
  .clock .second {
    width: 2px;
    position: absolute;
    height: 35%;
    background: #ff0000;
    left: 50%;
    bottom: 50%;
    transform-origin: 50% bottom;
    transform: translate(-50%, 0) rotate(0);
    border-radius: 3px;
  }
  
  .clock .time {
    font-family: monospace;
    font-size: 42px;
    text-align: center;
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .parent-time {
    font-family: monospace;
    font-size: 42px;
    text-align: center;
    position: absolute;
    top: 500px;
    left: 140px;
  }
  
  .parent-time input {
    text-align: center;
    font-size: 32px;
    height: 35px;
    width: 40px;
  }